<script setup>
	import { onMounted, ref } from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
	} from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'

	// 列表数据
	const activity = ref([])
	const currentPage = ref(1)
	async function getActivityList() {
		const res = await http.request({
			url: '/api/config/activeList',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
			},
		})
		console.log(res)
		activity.value = [...activity.value, ...res.data]
		activity.value.forEach((item) => {
			const currentTimestamp = Math.floor(Date.now() / 1000)
			item.leftTime = item.end_time - currentTimestamp
		})
	}

	function joinIn(item) {
		if (item.type == 1) {
			uni.navigateTo({
				url: `/homePage/activitydetail/index?id=${item.id}`,
			})
		} else {
			if (item.box_type == 1) {
				uni.navigateTo({
					url: `/drawPage/txDraw/index?id=${item.box_id}`,
				})
			} else {
				uni.navigateTo({
					url: `/drawPage/wxDraw/index?id=${item.box_id}`,
				})
			}
		}
	}

	// 上拉加载
	onReachBottom(() => {
		++currentPage.value
		getActivityList() // 获取的数据列表
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		currentPage.value = 1
		activity.value = []
		getActivityList() // 获取的数据列表
		uni.showToast({
			title: '刷新成功',
			icon: 'success',
			duration: 2000,
		})
		uni.stopPullDownRefresh() // 停止刷新
	})

	onShow(() => {
		activity.value = []
		getActivityList()
	})
</script>

<template>
	<view class="activity-content">
		<view
			class="activity-item"
			v-for="(item, index) in activity"
			:key="'activity' + index"
		>
			<image
				:src="item.img"
				mode=""
				style="
					width: 100%;
					height: 310rpx;
					background: pink;
					display: block;
				"
			></image>
			<view class="activity-item-bottom">
				<view class="bottom-left">
					<view
						class=""
						style="margin-bottom: 16rpx; font-size: 32rpx"
					>
						{{ item.title }}
					</view>
					<view class="time">
						<text
							style="
								margin-right: 15rpx;
								font-size: 22rpx;
								color: #9b9b9d;
							"
							>距结束还剩</text
						>
						<uni-countdown
							:font-size="10"
							color="#7863FF"
							background-color="#F5F3FD"
							:day="Math.floor(item.leftTime / (24 * 60 * 60))"
							:hour="
								Math.floor(
									(item.leftTime % (60 * 60 * 24)) / (60 * 60)
								)
							"
							:minute="
								Math.floor((item.leftTime % (60 * 60)) / 60)
							"
							:second="Math.floor(item.leftTime % 60)"
							:show-colon="false"
						/>
						<!-- <text class="time-square">{{
							Math.floor(item.leftTime / (24 * 60 * 60))
						}}</text>
						<text class="time-word">天</text>
						<text class="time-square">{{
							Math.floor(
								(item.leftTime % (60 * 60 * 24)) / (60 * 60)
							)
						}}</text>
						<text class="time-word">时</text>
						<text class="time-square">{{
							Math.floor((item.leftTime % (60 * 60)) / 60)
						}}</text>
						<text class="time-word">分</text>
						<text class="time-square">{{
							Math.floor(item.leftTime % 60)
						}}</text>
						<text class="time-word">秒</text> -->
					</view>
				</view>
				<view
					class="bottom-button"
					@click="joinIn(item)"
					v-if="item.type == 1"
				>
					查看详情
				</view>
				<view class="bottom-button" @click="joinIn(item)" v-else>
					立即参与
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.activity-content {
		height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
		.activity-item {
			height: 438rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8rpx;
			overflow: hidden;
			.activity-item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 128rpx;
				width: 100%;
				padding: 0 16rpx;
				box-sizing: border-box;
				.bottom-left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.time {
						display: flex;
						align-items: center;
						.time-square {
							display: inline-block;
							width: 40rpx;
							height: 28rpx;
							background-color: #f5f3fd;
							font-size: 20rpx;
							color: $all-color;
							line-height: 28rpx;
							text-align: center;
						}
						.time-word {
							font-size: 20rpx;
						}
					}
				}
				.bottom-button {
					width: 180rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background-color: $all-color;
					flex-shrink: 0;
					font-size: 28rpx;
					color: #fff;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}
	}
	::v-deep .uni-countdown__number {
		width: 40rpx !important;
		height: 28rpx !important;
		margin: 0 !important;
		line-height: 28rpx !important;
	}
	::v-deep .uni-countdown__splitor {
		line-height: 28rpx !important;
		padding: 0 4rpx !important;
	}
</style>
